<template>
    <div class="main">

      <button class="bubbly-button">Click me!</button>
<!-- 按钮2 -->
<div class="box">
  <button class="input">点击</button>
</div>
<!-- 按钮3 -->
<div class="btn3">
  <button class="shiny-button">Hover Me</button>
</div>
<!-- 按钮4 -->
<div class="btn btn4">
  <button class="flip-button">
  <div class="flex-center flip-text front">Hover Me</div>
  <div class="flex-center flip-text back">Hello Wise.Wrong</div>
</button>
</div>

<!-- 按钮5 -->
<div class="btn btn5">
  <button class="fill-button">Hover Me</button>
</div>

<!-- 按钮6 -->
<div class="btn btn6">
  <div class="line-button-wrapper">
  <button class="line-button">Hover Me</button>
  <div class="line-gourp">
    <div class="line line-top"></div>
    <div class="line line-left"></div>
    <div class="line line-right"></div>
    <div class="line line-bottom"></div>
  </div>
</div>
</div>

<!-- 按钮7 -->
<div class="btn btn7 container">
  <div class="wrap">
            <div class="cube">cube
                <div class="out-front">
                    <img src="./images/t1.png" alt="">
                </div>
                <div class="out-back">
                    <img src="./images/t2.png" alt="">
                </div>
                <div class="out-left">
                    <img src="./images/t3.png" alt="">
                </div>
                <div class="out-right">
                    <img src="./images/t4.png" alt="">
                </div>
                <div class="out-top">
                    <img src="./images/t5.png" alt="">
                </div>
                <div class="out-bottom">
                    <img src="./images/t6.png" alt="">
                </div>

                <span class="in-front">
                    <img src="./images/t7.png" alt="">
                </span>
                <span class="in-back">
                    <img src="./images/t8.png" alt="">
                </span>
                <span class="in-left">
                    <img src="./images/t1.png" alt="">
                </span>
                <span class="in-right">
                    <img src="./images/t2.png" alt="">
                </span>
                <span class="in-top">
                    <img src="./images/t3.png" alt="">
                </span>
                <span class="in-bottom">
                    <img src="./images/t4.png" alt="">
                </span>
            </div>
  </div>
</div>
    </div>
</template>

<script>

    export default {
        mounted() {
           this.Btn()
        },
        methods: {
            Btn(){
                 var animateButton = function(e) {

                e.preventDefault;
                //reset animation
                e.target.classList.remove('animate');
                
                e.target.classList.add('animate');
                setTimeout(function(){
                    e.target.classList.remove('animate');
                },700);
                };

                var classname = document.getElementsByClassName("bubbly-button");

                for (var i = 0; i < classname.length; i++) {
                classname[i].addEventListener('click', animateButton, false);
                }
            }
        },
    }
</script>

<style scoped lang='scss'>
.main{
  background: #000;
  height: calc(100vh - 100px);
  overflow-y: scroll;
  .btn{
    margin-top: 10px;
  }
}
body {
  font-size: 16px;
  font-family: 'Helvetica', 'Arial', sans-serif;
  text-align: center;
  background-color: #f8faff;
}

.bubbly-button {
  font-family: 'Helvetica', 'Arial', sans-serif;
  display: inline-block;
  font-size: 1em;
  padding: 1em 2em;
  margin-top: 100px;
  margin-bottom: 60px;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ff0081;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
.bubbly-button:focus {
  outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.bubbly-button:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
  transform: scale(0.9);
  background-color: #e60074;
  box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.bubbly-button.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}



/* 按钮2 */
	* {padding:0; margin:0}
    .box .input {
      position: relative;
      width: 50px;
      background: lightblue;
      color: #ffffff;
      border: none;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 4px;
      margin: 50px 50px;
      overflow: hidden;
    }
    .box .input:hover{
      background: lightblue;
    }
    .box .input::after{
      content: '';
      position: absolute;
      width: 12px;
      height: 200%;
      top: -100%;
      left: -50%;
      background: rgba(225,225,225,0.45);
      transform: translate3d(-300%,0,0) rotate(35deg);
    }
    .box .input:hover::after{
      transition: transform 1s ease-in-out;
      transform: translate3d(800%, 50%, 0) rotate(35deg);
    }


/* 按钮3 */
.btn3{
  button {
  background: transparent;
  border: none;
  cursor: pointer;
}

button.shiny-button {
  color: #fff;
  border: 1px solid #fff;
  padding: 8px 40px;
  position: relative;
  overflow: hidden; /* 非常重要 */
}

.shiny-button::after {
  content: '';
  display: block;
  position: absolute;
  top: -120px;
  left: -80px;
  width: 36px;
  height: 360px;
  background: #fff;
  opacity: 0.16;
  transform: rotate(-45deg);
  transition: all 500ms ease-out;
}

.shiny-button:hover::after {
  left: 200%;
}
}
// 按钮4
.btn4{
  
  button {
  background: transparent;
  border: none;
  cursor: pointer;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

button.flip-button {
  color: #fff;
  border: 1px solid #fff;
  position: relative;
  width: 200px;
  height: 40px;
}

.flip-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 600ms ease-in-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.flip-text.back {
  transform: rotateX(0.5turn);
}

.flip-button:hover .flip-text {
  transform: rotateX(0.5turn);
}

.flip-button:hover .flip-text.back {
  transform: rotateX(0turn);
}
}

// 按钮5
.btn5{
  button {
  --bg-color: #555660;
  --font-color: #fff;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: var(--transition-config);
}

button.fill-button {
  color: var(--font-color);
  border: 1px solid var(--font-color);
  position: relative;
  padding: 8px 40px;
  transition: all 600ms ease-out;
  /* 以下为核心代码 */
  background-size: 200% 100%;
  background-position: right bottom;
  background-image: linear-gradient(to right, var(--font-color) 50%, var(--bg-color) 50%);
}

button.fill-button:hover {
  color: var(--bg-color);
  background-position: left bottom;
}
}

// 按钮6
.btn6{
  --font-full-color: #fff;
  --font-color: rgba(255, 255, 255, 0.8);
//   html {
//   --font-full-color: #fff;
//   --font-color: rgba(255, 255, 255, 0.8);
// }

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

button.line-button {
  position: relative;
  z-index: 2;
  color: var(--font-color);
  padding: 12px 40px;
  border: 1px solid transparent;
}

.line-button-wrapper {
  position: relative;
  display: inline-block;
}

.line-button-wrapper .line-button,
.line-button-wrapper .line {
  transition: all 600ms ease-out;
}

.line-button-wrapper:hover .line-button {
  color: var(--font-full-color);
}

.line-button-wrapper:hover .line-gourp .line {
  opacity: 1;
  transform: translate(0, 0);
}

.line-gourp,
.line-gourp .line {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.line-gourp .line {
  border: 1px solid transparent;
  opacity: 0;
}

.line.line-top {
  border-top-color: var(--font-full-color);
  bottom: auto;
  transform: translateX(-50%);
}

.line.line-bottom {
  border-bottom-color: var(--font-full-color);
  top: auto;
  transform: translateX(50%);
}

.line.line-left {
  border-left-color: var(--font-full-color);
  right: auto;
  transform: translateY(80%);
}

.line.line-right {
  border-right-color: var(--font-full-color);
  left: auto;
  transform: translateY(-80%);
}
}

// 按钮7
/* 全模块定位和总布局 用定位top/left,没有margin但不脱标调位置 */
        
        .container {
            position: relative;
            top: 200px;
            left: 200px;
        }
        /* 主要用来装功能块在容器内保证定位 相当于该功能块的padding*/
        
        .container .wrap {
            // width: 100px;
            // height: 100px;
            // top: 150px;
            // left: 150px;
            // margin: 0;
            margin-left: 40%;
        }
        /* 功能块 */
        
        .container .wrap .cube {
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            /* perspective: 500px; */
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: ziZhuan linear 20s infinite;
            animation-direction: alternate-reverse;
            transition: all 0.5s;
        }
        
        @keyframes ziZhuan {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        
        .container .wrap .cube div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: rgb(0, 183, 255);
            z-index: -1;
            transition: all 0.5s;
            opacity: 0.45;
            outline: rgb(40, 226, 240) solid thick;
            box-shadow: rgba(17, 123, 194, 0.712) 0 0 50px 50px;
        }
        
        .container .wrap .cube div img {
            width: 100%;
            height: 100%;
        }
        
        .container .wrap .cube span {
            position: absolute;
            top: 50px;
            left: 50px;
            display: block;
            width: 100px;
            height: 100px;
            outline: rgba(21, 40, 211, 0.664) solid thin;
            background-color: rgba(11, 96, 224, 0.295);
        }
        
        .container .wrap .cube span img {
            width: 100%;
            height: 100%;
        }
        
        .container .wrap .cube .out-front {
            transform: rotateY(0deg) translateZ(100px);
        }
        
        .container .wrap .cube .out-back {
            transform: translateZ(-100px);
        }
        /* //y正方向逆时针 */
        
        .container .wrap .cube .out-left {
            transform: rotateY(-90deg) translateZ(100px);
        }
        
        .container .wrap .cube .out-right {
            transform: rotateY(90deg) translateZ(100px);
        }
        /*  x->正-上*/
        
        .container .wrap .cube .out-top {
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .container .wrap .cube .out-bottom {
            background-color: rgba(36, 238, 80, 0.253);
            transform: rotateX(-90deg) translateZ(100px);
        }
        
        .container .wrap .cube .in-left {
            transform: rotateY(-90deg) translateZ(50px);
        }
        
        .container .wrap .cube .in-right {
            transform: rotateY(90deg) translateZ(50px);
        }
        
        .container .wrap .cube .in-back {
            transform: translateZ(-50px);
        }
        
        .container .wrap .cube .in-front {
            transform: translateZ(50px);
        }
        
        .container .wrap .cube .in-top {
            transform: rotateX(90deg) translateZ(50px);
        }
        
        .container .wrap .cube .in-bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
        
        .container .wrap .cube:hover .out-front {
            transform: rotateY(0deg) translateZ(200px);
        }
        
        .container .wrap .cube:hover .out-back {
            transform: rotateY(0deg) translateZ(-200px);
        }
        
        .container .wrap .cube:hover .out-top {
            transform: rotateX(90deg) translateZ(200px);
        }
        
        .container .wrap .cube:hover .out-bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
        
        .container .wrap .cube:hover .out-right {
            transform: rotateY(90deg) translateZ(200px);
        }
        
        .container .wrap .cube:hover .out-left {
            transform: rotateY(-90deg) translateZ(200px);
        }
</style>